import { View, Text, Image, ITouchEvent, Picker, Video, Swiper, SwiperItem } from '@tarojs/components'
import Taro, { useDidShow, useLoad } from '@tarojs/taro';
import { useState } from 'react';
import axios from '@/request/index'
import classNames from 'classnames';
import { useWebStore } from '@/store/web';
import './index.scss'

export default function News() {


  const [list, setList] = useState<any[]>([])
  const [banner, setBanner] = useState<any[]>([1,2])
  const { setUrl } = useWebStore()

  useLoad(() => {
    console.log('Page loaded.')
  })

  const initList = async () => {
    const res = await axios.get('/video/getVideoInfo', {})
    if (res && res.data) {
      setList(res.data)
    }
  }
  const initBannerList = async () => {
    const res = await axios.get('/banner/video', {})
    if (res && res.data) {
      setBanner(res.data)
    }
  }

  useDidShow(() => {
    initList()
    initBannerList();
  });

  const onClickVideo = (item) => {
    setUrl(item.videoUrl)
    Taro.navigateTo({
      url: `/package-home/pages/WebView/index`
    })
  }

  const leftList = list.filter((item, index) => index % 2 === 0)
  const rightList = list.filter((item, index) => index % 2 !== 0)

  return (
    <View className='video bg-[#F5F5F5] min-h-screen pb-safe-offset-8'>
      {/* <Image src='' className='w-full h-[360px] bg-black' /> */}
      <Swiper
        className='h-[360px]'
        indicatorColor='#fff'
        indicatorActiveColor='rgb(222,223,227)'
        circular
        indicatorDots
        autoplay>
          {
            banner.map((item, i) => {
              return (
                <SwiperItem key={i}>
                  <Image 
                  onClick={() => onClickVideo(item)}
                  src={item.imgUrl} className='w-full h-[360px] bg-black' />
                </SwiperItem>
              )
            })
          }
      </Swiper>
      <View className='text-[36px] text-black bg-[rgba(229,229,229,0.49)] rounded-lg overflow-hidden py-4 px-5'>
        注重流感，掌握测试方法
      </View>
      <View className='flex flex-row justify-between gap-5 px-3'>
        <View className='flex-1'>
          {
            leftList.map((item, i) => {
              return (
                <View key={i} className='mb-3 relative'>
                  <View
                    // src={item.cover}
                    onClick={() => onClickVideo(item)}
                    className={classNames('bg-black w-full rounded-lg overflow-hidden bg-contain bg-no-repeat')}
                    style={{
                      height: i ? `302px` : '128px',
                      backgroundImage: `url(${item.cover})`
                    }}
                  />
                  <View className='absolute right-1 top-1  px-3 bg-[#bfbfbf] flex flex-row items-center rounded-2xl'>
                    <Image src={require('./images/like.png')} className='w-[40px] h-[40px]' />
                    <View className='text-white line-clamp-2 ml-2'>{item.likeNum}</View>
                  </View>
                  <View className='absolute left-0 right-0 bottom-0 px-3 bg-[rgba(0,0,0,0.5)]'>
                    <View className='text-white line-clamp-2'>{item.title}</View>
                  </View>
                </View>
              )
            })
          }
        </View>
        <View className='flex-1'>
          {
            rightList.map((item, i) => {
              return (
                <View key={i} className='mb-3 relative'>
                  <View 
                    // src={item.cover}
                    onClick={() => onClickVideo(item)}
                    className={classNames('bg-black w-full rounded-lg overflow-hidden bg-contain bg-no-repeat')}
                    style={{
                      height: i ? `301px` : '301px',
                      backgroundImage: `url(${item.cover})`
                    }}
                  />
                  <View className='absolute right-1 top-1  px-3 bg-[#bfbfbf] flex flex-row items-center rounded-2xl'>
                    <Image src={require('./images/like.png')} className='w-[40px] h-[40px]' />
                    <View className='text-white line-clamp-2 ml-2'>{item.likeNum}</View>
                  </View>
                  <View className='absolute left-0 right-0 bottom-0 px-3 bg-[rgba(0,0,0,0.5)]'>
                    <View className='text-white line-clamp-2'>{item.title}</View>
                  </View>
                </View>
              )
            })
          }
        </View>
      </View>
    </View>
  )
}
